<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_长度单位</title>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #div2 {
      width: 10em;
      height: 5em;
      font-size: 20px;
      background-color: turquoise;
    }


    #div3 {
      width: 10rem;
      height: 5rem;
      font-size: 20px;
      background-color: orange;
    }
    html {
      font-size: 50px;
    }
    #div4 {
        width: 10rem;
        height: 5rem;
    }
    #div5{
        background-color: green;
        width: 80%;
        height: 70%;
    }

  </style>
</head>
<body>

<!--
    css长度单位：
        1.px：像素 直接指定宽高
        2.em：相对单位，基于当前元素字体大小
        3.rem：相对单位，基于根元素字体大小(HTML元素)
        4.百分比: 相对父级元素进行计算。
        注意：css中设置长度,必须加单位,否者样式无效！！！！

-->
    <div id="div1"></div>
    <hr>
    <div id="div2">这是一个div</div>
    <hr>
    <div id="div3">这是第二个div</div>
    <hr>
    <div id="div4">这是第三个div
        <div id="div5">这是子div</div>
    </div>
</body>
</html>